import React, { PureComponent } from 'react';

import { connect } from 'dva';
import Search from '../../components/Search';
import moment from "moment";
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {downloadFile, goToRouter} from "@/utils/utils";
import CopyToClipboard from '@/components/CopyToClipboard';
import status from '@/config/status.config'

import {
  Table,
  Card,
  message,
  Button,
  Drawer,
  Form,
  Select,
  Spin,
  Divider,
} from 'antd';
import SplitBillService from "./services/splitBill";
import {router} from "umi";
import {withShopStatus} from "@/utils/enum";

@connect()
@Form.create()
class BuyoutSplitBill extends PureComponent {
  state = {
    tableData: [],
    loading: true,
    arrStatus: ['0/正在审核', '1/审核不通过', '2/审核通过'],
    current: 1,
    pageNumber: 1,
    pageSize: 10,
    type: null,
    shopId: null,
    shopName: null,
    status: null,
    visible: false,
    spinning: false,
    filter: {}
  };

  columns = [
    { title: '买断订单号', dataIndex: 'orderId', width: 140,
      render: text => <CopyToClipboard text={text} />,},
    {
      title: '原订单号', dataIndex: 'originOrderId', width: 140,
      render: orderId => {
        return (
          <div style={{ textAlign: 'center' }}>
            <a className="primary-color" onClick={() => router.push(`/Order/Details?id=${orderId}`)}
            >
              {orderId}
            </a>
          </div>
        );
      },
    },
    // { title: '商品名称', dataIndex: 'productName', key: 'shopName', width: 120, ellipsis: true},
    // { title: '店铺名称', dataIndex: 'shopName', key: 'shopName', width: 150},
    { title: '销售价', dataIndex: 'salePrice', align: 'center', width: 80, render: text => text < 0? 0: text},
    { title: '已付租金', dataIndex: 'userPayAmount', align: 'center', width: 90, render: text => text < 0? 0: text},
    { title: '买断尾款', dataIndex: 'endFund', align: 'center', width: 90, render: text => text < 0? 0: text},
    { title: '商家结算金额', dataIndex: 'toShopAmount', width: 120, render: text => text < 0? 0: text},
    { title: '平台佣金', dataIndex: 'toOpeAmount', width: 120, render: text => text < 0? 0: text},
    { title: '与商家结算状态', dataIndex: 'status', width: 140, render: text => withShopStatus[text]},
    { title: '下单人姓名 /手机号', dataIndex: 'createTime', width: 200, render: (text,record) => {
      return  `${record.username}/${record.phone}`
      }},
    { title: '下单时间', dataIndex: 'userPayTime', width: 120},
    // { title: '买断订单状态', dataIndex: 'status', key: 'status', width: 120,
    //   render: status => statusData[status],
    // },
    { title: '操作', align: 'center', key: 'action', fixed: 'right', width: 80,
      render: (text, record) => {
        return (
          <div className="table-action">
            <a onClick={()=> this.preview(record.id)}>
              查看
            </a>
          </div>
        );
      },
    },
  ];

  componentDidMount() {
    this.initData();
  }

  initData = () => {
    let payload = {
      pageNumber: this.state.pageNumber,
      pageSize: this.state.pageSize,
      ...this.state.filter,
    };
    this.setState(
      {
        loading: true,
      },
      () => {
        SplitBillService.buyOutPage(payload).then(res => {
          message.success('获取信息成功');
          this.setState({
            tableData: res.records,
            total: res.total,
            loading: false,
            current: res.current,
          });
        })
      },
    );
  };

  handleFilter = (data = {}) => {
    if (data.queryType && data.queryType === '分页') {
      this.initData();
    } else {
      this.setState(
        {
          pageNumber: 1,
          pageSize: 10,
          filter: data
        },
        () => {
          this.initData();
        },
      );
    }
  };
  
  handleExportData = (filter={}) => {
    if (filter.createDate && filter.createDate.length > 1) {
      filter.createTimeStart = moment(filter.createDate[0]).format('YYYY-MM-DD HH:mm:ss');
      filter.createTimeEnd = moment(filter.createDate[1]).format('YYYY-MM-DD HH:mm:ss');
    }
    SplitBillService.buyOutExport(filter).then(res => {
      location.href  = res
    })
  }

  //分页，下一页
  onChange = pageNumber => {
    this.setState(
      {
        pageNumber: pageNumber,
      },
      () => {
        this.handleFilter({ queryType: '分页' });
      },
    );
  };
  
  showTotal = () => {
    return `共有${this.state.total}条`;
  };
  
  //切换每页数量
  onShowSizeChange = (current, pageSize) => {
    this.setState({ pageSize: pageSize }, () => {
      this.handleFilter({ queryType: '分页' });
    });
  };
  
  preview = id => {
    this.setState(
      {
        visible: true,
        spinning: true,
      },
      () => {
        goToRouter(this.props.dispatch, '/finance/buyout/detail/'+ id)
      },
    );
  };
  
  render() {
    const {loading, current, total, arrStatus, visible, spinning, tableData} = this.state;
  
    return (
      <PageHeaderWrapper>
        <Card bordered={false}>
          <Search needExport arrStatus={arrStatus} source={'买断订单'}
                  exportData={this.handleExportData}
                  handleFilter={this.handleFilter} />
        </Card>
        <Card bordered={false} style={{ marginTop: 20 }}>
          <Table
            columns={this.columns}
            scroll={{x: true}}
            loading={loading}
            dataSource={tableData}
            rowKey={record => record.id}
            pagination={{
              current: current,
              total: total,
              onChange: this.onChange,
              showTotal: this.showTotal,
              showQuickJumper: true,
              pageSizeOptions: ['5', '10', '20'],
              showSizeChanger: true,
              onShowSizeChange: this.onShowSizeChange,
            }}
          />
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default BuyoutSplitBill;
